<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>分数展示</h2>
        请输入最低分数:<input type="text" name="分数" v-model.number.lazy="num">
        <input type="button" value="确定" v-on:click="UpDateValue">
        <!-- 如果点击按钮，则将输入框的值，来做比较 -->
        <br>

        <table v-show="count!=0">
            <!-- 当改变了输入框的值之后，将会展示出来 -->
            <tr>
                <td v-for="(item, index) in mark" :key="index" v-if="item>=count">{{item}}</td>
            </tr>
        </table>

    </div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            mark:[11,22,33,44,55,66,77,88,99,100],
            num:0,
            count:0
        },
        methods: {
            UpDateValue:function(){
                this.count=this.num;
            }
        },
    })
</script>
</html>